<template>
  <div class="userinfo">
    <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
    <h2>每日推荐</h2>
    <div class="tab-ct">
      <ul>
        <li v-for="(item, index) in tableData" :key="index" @click="bindViewTap">
          <p>{{item.title || item.name}}</p>
          <div class="list">
            <div class="imgWrap">
              <img :src="item.img_link" alt="">
            </div>
            <div class="textWrap">
              <div class="line">
                <h4>{{item.name}}</h4>
                <h3 class="b-font red">￥{{item.final_price}}</h3>
                <p class="s-font">{{item.shop}}</p>
              </div>
              <div class="flex line gray s-font">
                <p>原价: ￥{{item.price}}</p>
                <p>销量: {{item.sales_volume}}</p>
              </div>
              <div class="flex line bg-icon">
                <p class="bg-icon-red">{{item.coupon_amount}}券</p>
                <p class="bg-icon-plain">返: {{item.commission}}</p>
              </div>
            </div>

          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      tableData: [
        {
          title: `自由点卫生巾!每日呵护你的健康 \n 自由点卫生巾!每日呵护你的健康`,
          leftMount: '100000',
          totalMount: '100000',
          begin: '2019-11-27',
          end: '2019-11-30',
          coupon_link: 'https://uland.taobao.com/coupon/edetail?e=YYshv1UieAgN%2BoQUE6FNzF%2BfTYCNFETkZwAUKPQQtG7ha9dx%2FOVhBci1xc%2BBDXYfD86HZgm2HWB%2BQ2sTOx8ghHN0TofS8dnAWOGP4KauORqiIGwfy4wblQ%3D%3D&af=1&pid=mm_17965998_850300177_109805600394',
          coupon_amount: '满69元减30元',
          commission: '20.97',
          saler_ww: '自由点旗舰店',
          product_id: '39875126216',
          img_link: 'http://img.alicdn.com/bao/uploaded/i2/1785158051/O1CN01tE0Htx29LPIZu1LzU_!!0-item_pic.jpg',
          price: '69.90',
          name: '自由点卫生巾女日夜用少女专用学生姨妈巾整箱套装组合装超薄正品',
          sales_volume: '185545',
          detail_link: 'http://item.taobao.com/item.htm?id=39875126216',
          shop: '自由点旗舰店',
          percent: '30.00',
          promoter_link: 'https://s.click.taobao.com/t?e=m%3D2%26s%3DswLQwyI8W%2B4cQipKwQzePOeEDrYVVa64K7Vc7tFgwiHjf2vlNIV67kja7tE992qvZW7hPg9HazhyvGj52wKDIPOebTLss8PmydYSyCprVxkg2WURbZ4uwBlD4rcsPguasSaFrEdZ511vYl3LTBc5iUuAz77SE9T1Mf9goaS5ihEhhQs2DjqgEA%3D%3D',
          coupon_tkl: '￥mCMsYDFoAho￥',
          coupon_s_link: 'https://s.click.taobao.com/JdS5duv',
          tkl: '￥Dv23YDFoN2K￥',
          promoter_s_link: 'https://s.click.taobao.com/lzK5duv'
        },
        {
          leftMount: '23700',
          totalMount: '30000',
          begin: '2019-11-27',
          end: '2019-11-27',
          coupon_link: 'https://uland.taobao.com/coupon/edetail?e=22c3eeUoBNcN%2BoQUE6FNzF%2BfTYCNFETkZwAUKPQQtG7ha9dx%2FOVhBci1xc%2BBDXYfsigjQKX7pY3l1hZOvTqXnWBUs41DPp5YWOGP4KauORqiIGwfy4wblQ%3D%3D&af=1&pid=mm_17965998_850300177_109805600394',
          coupon_amount: '满2元减1元',
          commission: '1.89',
          saler_ww: '采纳福家居专营店',
          product_id: '42579036834',
          img_link: 'http://img.alicdn.com/bao/uploaded/i3/560267078/O1CN01Adj8n2229lvaZsgkd_!!0-item_pic.jpg',
          price: '2.10',
          name: '平安夜苹果礼盒平安果包装盒圣诞节苹果盒圣诞节礼物礼品创意盒子',
          sales_volume: '87',
          detail_link: 'http://item.taobao.com/item.htm?id=42579036834',
          shop: '采纳福家居专营店',
          percent: '90.00',
          promoter_link: 'https://s.click.taobao.com/t?e=m%3D2%26s%3DRCaUI%2Fw95gocQipKwQzePOeEDrYVVa64K7Vc7tFgwiHjf2vlNIV67kja7tE992qvZW7hPg9HazhyvGj52wKDIPOebTLss8PmydYSyCprVxkg2WURbZ4uwBlD4rcsPguaaJloMLdzN%2BORthk3w7DcXwP9Zg20a5B9d%2Bq4iNH5BIrGDmntuH4VtA%3D%3D',
          coupon_tkl: '￥fjwxYDFohX8￥',
          coupon_s_link: 'https://s.click.taobao.com/7tS5duv',
          tkl: '￥LZWDYDFoUQm￥',
          promoter_s_link: 'https://s.click.taobao.com/A9U5duv'
        },
        {
          leftMount: '12818',
          totalMount: '30000',
          begin: '2019-11-27',
          end: '2019-11-27',
          coupon_link: 'https://uland.taobao.com/coupon/edetail?e=ZEqlDfQ6q%2B0N%2BoQUE6FNzF%2BfTYCNFETkZwAUKPQQtG7ha9dx%2FOVhBci1xc%2BBDXYfHv69%2F64THFCa%2Fj3C1HKelND4Tg2AUbRn2IaVVct%2FH6e%2FbDB7vEbF3Q%3D%3D&af=1&pid=mm_17965998_850300177_109805600394',
          coupon_amount: '满28元减20元',
          commission: '8.64',
          saler_ww: '卡乐优旗舰店',
          product_id: '534381476349',
          img_link: 'http://img.alicdn.com/bao/uploaded/i1/692996526/O1CN01LcnZpm1y4xIW1AAM9_!!0-item_pic.jpg',
          price: '28.80',
          name: '卡乐优橡皮泥无毒彩泥儿童黏土大包装太空手工泥玩具女孩超轻粘土',
          sales_volume: '25827',
          detail_link: 'http://item.taobao.com/item.htm?id=534381476349',
          shop: '卡乐优旗舰店',
          percent: '30.00',
          promoter_link: 'https://s.click.taobao.com/t?e=m%3D2%26s%3Dkf3MLTXL%2B%2FscQipKwQzePOeEDrYVVa64K7Vc7tFgwiHjf2vlNIV67kja7tE992qvZW7hPg9HazhyvGj52wKDIPOebTLss8PmydYSyCprVxkg2WURbZ4uwBlD4rcsPgua4Zm3Umedcpnw7mQiUGwM2J%2Fh5cI%2BkbRv2IdwIGPyKDchhQs2DjqgEA%3D%3D',
          coupon_tkl: '￥CW7AYDFLSJX￥',
          coupon_s_link: 'https://s.click.taobao.com/SMR5duv',
          tkl: '￥TWLyYDFoRG7￥',
          promoter_s_link: 'https://s.click.taobao.com/Q1M5duv'
        },
        {
          leftMount: '94000',
          totalMount: '100000',
          begin: '2019-11-27',
          end: '2019-11-29',
          coupon_link: 'https://uland.taobao.com/coupon/edetail?e=G%2BbnXDkeHj4N%2BoQUE6FNzF%2BfTYCNFETkZwAUKPQQtG7ha9dx%2FOVhBci1xc%2BBDXYfHv69%2F64THFDueqkSDMwYxkhBqwvZv%2FW62IaVVct%2FH6e%2FbDB7vEbF3Q%3D%3D&af=1&pid=mm_17965998_850300177_109805600394',
          coupon_amount: '满69元减55元',
          commission: '20.70',
          saler_ww: '乐力保健食品旗舰店',
          product_id: '536892809132',
          img_link: 'http://img.alicdn.com/bao/uploaded/i1/2347973243/O1CN01XV5L4m1ZpL12lForP_!!0-item_pic.jpg',
          price: '69.00',
          name: '乐力益生菌成人儿童大人孕妇肠胃肠道益生元调理活菌冻干粉小蓝条',
          sales_volume: '44872',
          detail_link: 'http://item.taobao.com/item.htm?id=536892809132',
          shop: '乐力保健食品旗舰店',
          percent: '30.00',
          promoter_link: 'https://s.click.taobao.com/t?e=m%3D2%26s%3DbTrtZO1D%2BiocQipKwQzePOeEDrYVVa64K7Vc7tFgwiHjf2vlNIV67kja7tE992qvZW7hPg9HazhyvGj52wKDIPOebTLss8PmydYSyCprVxkg2WURbZ4uwBlD4rcsPguaNWf5Y0NQzvD7eO6Y8OffcLuWzhx3KUwmYnEuqKaIoT1xKmPmpIKZsA%3D%3D',
          coupon_tkl: '￥2wo9YDFLgOo￥',
          coupon_s_link: 'https://s.click.taobao.com/uyJ5duv',
          tkl: '￥GUm5YDFoDXM￥',
          promoter_s_link: 'https://s.click.taobao.com/58T5duv'
        }
      ],
      motto: 'Hello miniprograme',
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: ''
      }
    }
  },

  components: {
    card
  },

  methods: {
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    }
  },

  mounted () {
    this.tableData.forEach(element => {
      element.commission = (parseFloat(element.commission) * 0.53).toFixed(2)
      element.coupon_amount = element.coupon_amount.split('减')[1]
      element.final_price = (element.price - element.coupon_amount.slice(0, -1)).toFixed(2)
    })
    console.log(this.tableData)
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}
.flex{
  display: flex;
  justify-content: space-between;
}

.line{
  margin-bottom: 5px;
}
.tab-ct{
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
}
.tab-ct .list{
  position: relative;
  padding: 5px;
  height: 130px;
  border-bottom: 1px solid #eee;
}
.tab-ct .list h3{
  margin-bottom: 6px;
}
.tab-ct .list h4{
  /* padding-right: 90px; */
  /* overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  line-height: 38px; */
  /* color: #555; */
  /* margin-bottom: 6px; */
}
.imgWrap{
  position: absolute;
}
.imgWrap img{
  width: 130px;
  height: 130px;
  border-radius: 5px;
}
.textWrap{
  padding-left: 140px;
}

.gray{
  color: #777;
}
.red{
  color: #df0303;
}
.s-font{
  font-size: 12px;
}
.b-font{
  font-size: 20px;
}
.bg-icon-red{
  padding: 0px 5px;
  width: 70px;
  line-height: 20px;
  height: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 12px;
  background: #df0303;
  color: #fff;
}
.bg-icon-plain{
  padding: 0px 5px;
  line-height: 20px;
  height: 20px;
  border-radius: 3px;
  color: #df0303;
  font-size: 12px;
  background: #ffefef;
}
.bold{
  font-weight: bold;
  color: #111;
}
</style>
